<style scoped>
  .content-base{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    padding: 2%;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.6);
  }
  .content-control{
    padding-top: 30px;
    padding-bottom: 50px;
    height: 100%;
    position: relative;
    background-color: white;
    border-radius: 5px;
  }
  .content-head{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    border-bottom: 1px solid #ddd;
  }
  .content-head .title{
    font-size: 14px;
  }
  .content-head .close-icon{
    display: inline-block;
    float: right;
    cursor: pointer;
    height: 100%;
    position: relative;
    font-size: 18px;
  }
  .content-foot{
    position: absolute;
    bottom:0;
    left:0;
    width: 100%;
    height: 50px;
    text-align: right;
    padding-right: 50px;
  }
  .content{
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .fixedSize{
    width: 400px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
</style>

<template>
    <div :style="{zIndex:zIndex,padding:padding}" class="content-base">
      <div class="content-control" :class="{'fixedSize':type == 'small'}">
        <div class="content-head">
          <span class="title">{{title}}</span>
          <span @click="cancel" class="close-icon">&times;</span>
        </div>
        <div :id="bodyId" class="content">
          <slot></slot>
        </div>
        <div class="content-foot">
          <el-button @click="cancel">取消</el-button>
          <el-button :loading="confirmLoading" @click="confirm" type="primary">{{confirmText}}</el-button>
        </div>
      </div>
    </div>
</template>

<script>

export default {
    name:'dami-dialog',
    componentName:'dami-dialog',
    props:{
      title:{
        type: String
      },
      bodyId: {
        type: String
      },
      zIndex: {
        type: Number,
        default:2000
      },
      padding:{
        type: String,
        default:'2%'
      },
      type:{
        type: String,
        default:''
      },
      confirmText:{
        type: String,
        default:'保存'
      }

    },
    data() {
        return {
          confirmLoading:false
        }
    },
    methods:{
      cancel(){
        this.$emit('cancel')
      },
      confirm(){
        this.$emit('confirm')
      }
    },
    mounted() {

    }
}
</script>
